<template>
	<view class="obligation">
		<uninavbar title="我的订单" leftIcon='leftIcon' rightIcon='' rightText="" urlType='obligation' />
		<view class="obligationTop">
			<view :class="showTab==item.id?'orderTab orderTabShow':'orderTab'" v-for="(item,index) in orderTab"
				:key="index" @tap="orderTabShow(item)">
				{{item.name}}
			</view>
		</view>

		<view class="obligationCon">

			<view class="orderArray" v-for="(item,index) in orderlistData" :key="index">
				<navigator :url="'/order/orderDetails?orderId='+item.id">
					<view class="orderStoreName">
						<view class="orderStoreTitle">
							{{dayjs(item.createTime).format('YYYY-MM-DD hh:mm:ss')}}

							<!-- 芯娇晴旗舰店
					<image src="/static/images/productDetails/zk.png" mode=""></image> -->
						</view>
						<view class="orderType" v-if="item.status==0">
							待付款
						</view>
						<view class="orderType" v-if="item.status==1">
							待发货
						</view>
						<view class="orderType" v-if="item.status==2">
							已发货
						</view>
						<view class="orderType" v-if="item.status==3">
							已完成
						</view>
						<view class="orderType" v-if="item.status==4">
							已取消
						</view>
					</view>
					<view class="orderGoods" v-for="(item,index) in item.orderItemList">
						<image :src="item.productPic" mode=""></image>
						<view class="orderGoodsR">
							<view class="orderGoodsName">
								<view class="orderGoodsTitle">
									{{item.productName}}
								</view>

								<view class="orderGoodsNum">
									¥ {{item.productPrice|unitConverter}}
								</view>

							</view>
							<view class="orderGoodsType">
								<text class="" v-for="(item,index) in JSON.parse(item.productAttr)">
									{{item.key }}:{{item.value}};
								</text>
								<view class="orderQuantity">
									X{{item.productQuantity}}
								</view>
							</view>
							<view class="orderGoodsTip">
								<view class="">
									{{item.promotionName}}
								</view>
								<!-- <view class="">
									7天无理由退款
								</view> -->

							</view>
						</view>
					</view>
				</navigator>
				<view class="orderPrice">
					<!-- <text class="">
						含运费险等服务
					</text> -->
					<view class="">
						<text>需付款</text>  ¥{{item.totalAmount|unitConverter}}
					</view>

				</view>

				<view class="orderMore" v-if="item.status!=4">
					<view class="orderMoreAll">
						<!-- 更多 -->
					</view>
					<view class="orderMoreBtn">

						<view class="" v-if="item.status==0" @tap="canceShow(item)">
							取消订单
						</view>

						<navigator class="item" :url="'/order/confirmOrder?order='+item.id" v-if="item.status==0">
							<view class="">
								立即付款
							</view>
						</navigator>
					<!-- 	<navigator class="item" url="/order/invoice" v-if="item.status==3">
							<view class="">
								申请开票
							</view>
						</navigator> -->
						<!-- <view class="" v-if="item.status==1">
						催发货
					</view> -->
						<navigator class="item" :url="'/order/modifyAddress?orderId='+item.id" v-if="item.status==1">
							<view class="">
								修改地址
							</view>
						</navigator>
						<!-- 	<view class="" v-if="item.status==2">
						延长收货
					</view> -->
						<navigator class="item" :url="'/order/logistics?orderId='+ item.id" v-if="item.status==2">
							<view class="">
								查看物流
							</view>
						</navigator>

						<view class="item" v-if="item.status==2" @tap="receiveOrder(item.id)">
							
								确认收货
						
						</view>

						<!-- <navigator class="item" url="/order/evaluate" v-if="item.status==3">
							<view class="">
								评价
							</view>
						</navigator> -->
					<!-- 	<view class="" v-if="item.status==3">
							加入购物车
						</view> -->
					</view>

				</view>

			</view>
			<view class="orderArrayNull" v-if="!this.orderlistData">
				<image src="/static/images/user/dd.png" mode=""></image>
			</view>
		</view>
		<recycleOrder v-if="showTab==5" />
		<uni-popup class="logisticsPopup" :show="popupShow" @close="popupShow = false" ref="popup" type="center">
			<view class="cancel">
				<view class="cancelTitle">
					是否取消订单
				</view>
				<view class="cancelBtn">
					<view class="" @tap="popupShow = !popupShow">
						取消
					</view>
					<view class="cancelBtnOk" @tap="cancelUserOrder()">
						确定
					</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uninavbar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import recycleOrder from './recycleOrder.vue';
	import API from '@/config/newApi.js'
	export default {
		components: {
			uninavbar,
			recycleOrder
		},
		data() {
			return {
				showTab: -1,
				orderTab: [{
					name: "全部",
					id: -1,
				}, {
					name: "待付款",
					id: 0
				}, {
					name: "待发货",
					id: 1
				}, {
					name: "待收货",
					id: 2
				}, {
					name: "已完成",
					id: 3
				}, {
					name: "已取消",
					id: 4
				}],
				orderlistData: [],
				popupShow: false,
				orderData: {
					status: -1,
					pageNum: 1,
					pageSize: 15,
				},
				paymentData: null

			}
		},
		onLoad(data) {
			if (data.status) {
				this.showTab = data.status
				this.orderData.status = data.status

			}
			this.orderlist()

		},
		methods: {
			receiveOrder(orderId){
				let superThis = this;
				uni.showModal({
				    title: '提示',
				    content: '是否要确认收货？',
				    success: function (res) {
				        if (res.confirm) {
				            uni.showLoading({
				            	title: '请稍后'
				            })
				            // confirmReceiveOrder({orderId:orderId}).then(response=>{
				            // 	uni.hideLoading();
				            // 	superThis.loadData();
				            // });
							let data={
								orderId:orderId
							}
							let args = {
								ContentType: 'application/x-www-form-urlencoded;charset=UTF-8'
							}
							API.confirmReceiveOrder(data,args).then(res => {
									if (res.code == 200) {
										superThis.showTab=3
										superThis.status= 3
										uni.hideLoading();
										superThis.$alert(res.message);
										superThis.orderlist()
									}
								})
								.catch(err => {
									console.log(err)
								})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			orderTabShow(item) {
				this.showTab = item.id
				this.orderData.status = item.id
				this.orderlist()
			},
			canceShow(item) {
				this.popupShow = !this.popupShow
				this.paymentData = item
			},
			cancelUserOrder() {
				let data = {
					orderId: this.paymentData.id
				}
				let args = {
					ContentType: 'application/x-www-form-urlencoded;charset=UTF-8'
				}
				API.cancelUserOrder(data, args).then(res => {
						if (res.code == 200) {
							this.popupShow = !this.popupShow
							this.$alert(res.message);
							this.orderlist()
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			orderlist() {

				API.orderlist(this.orderData).then(res => {

						if (res.code == 200) {
							this.orderlistData = res.data.list

						}
					})
					.catch(err => {
						console.log(err)
					})
			}

		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f9f9f9;
	
	}

	.obligation {
		padding: 40rpx;
		overflow: hidden;
	}
	.obligationCon{
		height: calc(100vh - 260rpx);
		overflow: auto;
	}
	.obligationTop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		padding-top: 80rpx;
		.orderTab {
			text-align: center;
			color: #333;
			font-size: 26rpx;
			cursor: pointer;
		}

		.orderTabShow {
			// color: #6954D5;
			// border-bottom: 4rpx solid #6954D5;
			font-size: 28rpx
		}

		.orderTabShow::after {
			content: " ";
			position: relative;
			width: 50rpx;
			height: 8rpx;
			background-color: #6954D5;
			display: block;
			margin: auto;
			border-radius: 8rpx;
		}
	}

	.orderArray {
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 32rpx;
		margin-bottom: 30rpx;

		.orderStoreName {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10rpx;
			border-bottom: 2rpx solid #f4f4f4;
			padding-bottom: 10rpx;
			.orderStoreTitle {
				display: flex;
				align-items: center;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}

			.orderType {
				color: #6954D5;
				font-size: 26rpx;
			}
		}

		.orderGoods {
			display: flex;
			justify-content: space-between;
			position: relative;
			margin-bottom: 40rpx;

			.orderGoodsR {
				flex: 1;
			}

			image {
				width: 162rpx;
				height: 188rpx;
				border-radius: 8px;
				margin-right: 40rpx;
				background-color: #f1f1f1;
			}

			.orderGoodsName {
				display: flex;
				align-items: flex-start;
				font-size: 28rpx;
				justify-content: space-between;

				.orderGoodsTitle {
					display: -webkit-box;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					height: 40rpx;
					width: 300rpx;
					margin-bottom: 20rpx;
				}

				.orderGoodsNum {
					margin-left: 8rpx;
					font-size: 26rpx;
					color: #FD3933;
				}
			}

			.orderGoodsType {
				color: #666;
				font-size: 24rpx;
				width: 360rpx;

				.orderQuantity {
					color: #999;
					position: absolute;
					right: 0;
					top: 46rpx;
				}
			}

			.orderGoodsTip {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				position: absolute;
				bottom: 0;

				view {
					border: solid #6954D5 2rpx;
					font-size: 20rpx;
					color: #6954D5;
					border-radius: 10rpx;
					padding: 0 10rpx;
					margin-right: 20rpx;
				}
			}
		}

		.orderMore {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.orderMoreAll {
				color: #999;
				font-size: 24rpx;
			}

			.orderMoreBtn {
				display: flex;
			
				padding-top: 20rpx;
				view {
					border: solid #6954D5 2rpx;
					font-size: 20rpx;
					color: #6954D5;
					margin-left: 20rpx;
					padding: 0 25rpx;
					border-radius: 20px;
					height: 55rpx;
					line-height: 55rpx;
				}
			}
		}

		.orderPrice {
			text-align: right;
			padding-bottom: 20rpx;
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;
			color: #FD3933;
			font-size: 24rpx;
			// border-bottom: 2rpx solid #f1f1f1;
			text {
				color: #999;
				margin-right: 10rpx;
			}
		}

		.obligationTip {
			text-align: center;
			color: #6954D5;
			background: #F3F2FC;
			margin-top: 20rpx;
			border-radius: 16rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 26rpx;
		}

		.shippedTip {
			text-align: center;
			color: #999;
			background: #F3F2FC;
			margin-top: 20rpx;
			border-radius: 16rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 26rpx;

			text {
				color: #333;
			}
		}

	}

	.orderArrayNull {
		text-align: center;
		margin-top: 180rpx;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}
</style>